<template>
  <div>
    <!-- 默认 click 触发子菜单 -->
    <div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"></el-cascader>
    </div>

    <!-- hover 触发子菜单 -->
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
          v-model="value2"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"></el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [], // 默认 click 触发子菜单的绑定值
      value2: [], // hover 触发子菜单的绑定值
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [
            {
              value: 'disciplines',
              label: 'Disciplines',
              children: [
                {
                  value: 'consistency',
                  label: 'Consistency'
                },
                {
                  value: 'feedback',
                  label: 'Feedback'
                }
              ]
            }
          ]
        }
        // 可以根据需要添加更多选项...
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('改变后的值:', value);
    }
  }
};
</script>

<style scoped>
.block {
  margin: 15px;
}

.demonstration {
  margin-right: 10px;
}
</style>